<template>
  <div style="width: 100%;height: 100%;position: relative">
    <large-screen></large-screen>
    <el-row :gutter="16" class="switches">
      <el-col :span="8">
        <div class="card">
          <!--<img :src="'./assets/img'+'1'+'.png'">-->
          <!--<img src="./assets/img1.jpg" style="max-width: 90%;max-height: 90%;margin-top: 1vh">-->
          <img :src="require('./assets/img'+1+'.jpg')" style="max-width: 90%;max-height: 90%;margin-top: 1vh">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import largeScreen from './views/largeScreen/largeScreen'

export default {
  name: 'App',
  components :{largeScreen},
  data() {
    return {

    }
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style>
  .switches {
    position: absolute;
    bottom: 4vh;
    left: 32%;
  }
  .card {
    width: 20vh;
    height: 12vh;
    z-index: 9999;
    text-align: center;
    padding-top: 2vh;
    background: url("./assets/bk.png") no-repeat center;
    background-size: 128% 100%;
  }
</style>
